<template>
  <v-container id="lock" fill-height tag="section">
    <v-row justify="center">
      <v-slide-y-transition appear>
        <v-card class="mt-6 mt-md-0" light max-width="100%" width="250">
          <v-card-text class="text-center">
            <v-avatar class="mt-n12 mb-6 elevation-12" color="grey" size="88">
              <v-img src="@/assets/svg/vmd.svg" />
            </v-avatar>

            <div
              class="display-2 font-weight-light mb-3 text--darken grey--text"
              v-text="title"
            ></div>

            <v-text-field class="mb-8" color="secondary" label="输入密码" />

            <pages-btn> 解锁 </pages-btn>
          </v-card-text>
        </v-card>
      </v-slide-y-transition>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: "PagesLock",

  components: {
    PagesBtn: () => import("./components/Btn"),
  },

  computed: {
    title() {
      return this.$route.meta.title;
    },
  },
};
</script>
